<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加报警"
    width="80%"
    :before-close="Cancel"
    :close-on-click-modal="false"
  >
    <el-form :model="form" :rules="rules" ref="ruleFormRef" label-position="top">
      <el-form-item label="报警名称" prop="name">
        <el-input v-model="form.name" clearable placeholder="请输入报警名称" style="width: 240px" />
      </el-form-item>
      <el-form-item label="通知联系人">
        <div style="display: flex; flex-direction: column">
          <div style="flex: 1; margin: 2% 0">
            <el-checkbox-group v-model="form.notificationContact" size="large">
              <el-checkbox-button
                v-for="item in notificationContactList"
                :key="item.id"
                :label="item.id"
              >
                {{ item.contactName }}
              </el-checkbox-button>
            </el-checkbox-group>
          </div>
          <div style="flex: 1; margin: 2% 0">
            <el-checkbox-group v-model="form.communicationMethod" size="large">
              <el-checkbox-button
                v-for="method in communicationMethodList"
                :key="method.value"
                :label="method.value"
              >
                {{ method.label }}
              </el-checkbox-button>
            </el-checkbox-group>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="执行策略">
        <el-radio-group v-model="form.ExecutionPolicy">
          <el-radio-button label="EXECUTE_ONE_TIME" @change="changeExecutionPolicy"
            >执行一次</el-radio-button
          >
          <el-radio-button label="EXECUTE_MULTIPLE_TIMES" @change="changeExecutionPolicy"
            >多次执行</el-radio-button
          >
          <el-radio-button label="EXECUTE_IN_LOOP" @change="changeExecutionPolicy"
            >循环执行</el-radio-button
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="多次执行" v-if="frequencyShow">
        <div style="display: flex; flex-direction: column">
          <div style="flex: 1">
            <el-input
              v-model="form.frequency"
              style="width: 220px"
              placeholder="请输入执行次数"
            ></el-input>
          </div>
          <div style="flex: 1">
            <el-time-picker
              style="margin-top: 20px"
              v-model="form.time"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
              placeholder="请输入间隔时间"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="间隔时间" v-if="timeShow">
        <!-- <el-time-picker
          v-model="form.time"
          placeholder="请选择循环执行的时间"
          format="HH:mm:ss"
          value-format="HH:mm:ss"
        /> -->
        <Vue3Cron @change="changeCron" v-model:value="form.time" style="width: 100%"></Vue3Cron>
        <div v-if="form.time" style="margin-left: 40%">已选时间Cron {{ form.time }}</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
        <!-- <el-button type="primary" @click="dddd"> 确定456 </el-button> -->
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, ref } from 'vue'
import Vue3Cron from '../../components/Vue3Cron.vue'
import Notification from '../../MyJson/Notification.json'
import { ElMessage } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'
export default defineComponent({
  components: {
    Vue3Cron
  },
  setup(_, { emit }) {
    // 页面 显示 隐藏
    const dialogVisible = ref(false)
    // 页面 表单
    const form = ref({
      id: 'uuid',
      name: '',
      ExecutionPolicy: 'EXECUTE_ONE_TIME',
      status: 'ALERT_CLOSE',
      notificationContact: [],
      communicationMethod: [],
      frequency: '',
      time: '00:00:00'
    })
    // 页面 多选框 联系人
    const notificationContactList = ref([])
    // 页面 多选框  通讯方式
    const communicationMethodList = ref(Notification)
    const props = { multiple: true }
    // 页面 表单校验规则
    const rules = ref({
      name: [{ required: true, message: '请输入警报名称', trigger: 'blur' }]
    })
    // 页面 多次执行 显示隐藏
    const frequencyShow = ref(false)
    // 页面 多次执行 显示隐藏
    const timeShow = ref(false)
    // 区别 修改和新增
    const IsChange = ref(false)
    // 表单实例对象
    const ruleFormRef = ref(null)
    //
    //
    //
    // 通知联系人
    const changeExecutionPolicy = () => {
      if (form.value.ExecutionPolicy === 'EXECUTE_ONE_TIME') {
        frequencyShow.value = false
        timeShow.value = false
      } else if (form.value.ExecutionPolicy === 'EXECUTE_MULTIPLE_TIMES') {
        frequencyShow.value = true
        timeShow.value = false
      } else if (form.value.ExecutionPolicy === 'EXECUTE_IN_LOOP') {
        frequencyShow.value = false
        timeShow.value = true
        changeCron()
      }
    }
    const changeCron = (val) => {
      if (typeof val !== 'string') return false
      form.time = val
    }

    // 提交表单
    const submit = () => {
      ruleFormRef.value.validate((validate) => {
        if (validate) {
          if (IsChange.value) {
            if (form.value.ExecutionPolicy === 'EXECUTE_ONE_TIME') {
              form.value.frequency = ''
              form.value.time = ''
            } else if (form.value.ExecutionPolicy === 'EXECUTE_IN_LOOP') {
              form.value.frequency = ''
              form.value.time = '* * * * * ? *'
            }
            const res = window.api.updateAlert(JSON.stringify(form.value))
            if (res === '修改成功') {
              emit('update')
              ElMessage.success(res)
              Cancel()
            } else {
              ElMessage.error(res)
              Cancel()
            }
          } else {
            if (form.value.ExecutionPolicy === 'EXECUTE_ONE_TIME') {
              form.value.frequency = ''
              form.value.time = ''
            } else if (form.value.ExecutionPolicy === 'EXECUTE_IN_LOOP') {
              form.value.frequency = ''
              form.value.time = '* * * * * ? *'
            }
            form.value.id = uuidv4()
            const res = window.api.insertAlert(JSON.stringify(form.value))
            if (res === '新增成功') {
              emit('update')
              ElMessage.success(res)
              Cancel()
            } else {
              ElMessage.error(res)
              Cancel()
            }
          }
        }
      })
    }

    // 取消
    const Cancel = () => {
      form.value = {
        id: 'uuid',
        name: '',
        ExecutionPolicy: '',
        status: 'ALERT_CLOSE',
        notificationContact: [],
        communicationMethod: [],
        frequency: '',
        time: ''
      }
      dialogVisible.value = false
      IsChange.value = false
    }
    const dddd = () => {
      // const contactList = window.api.listContact()
      // notificationContactList.value = JSON.parse(contactList)
      IsChange.value = true
    }
    return {
      dialogVisible,
      form,
      notificationContactList,
      props,
      rules,
      communicationMethodList,
      frequencyShow,
      timeShow,
      ruleFormRef,
      dddd,
      changeExecutionPolicy,
      submit,
      changeCron,
      Cancel
    }
  }
})
</script>

<style>
</style>